<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="stylesheet" type="text/css" href="http://www.jscodes.com/codes/calendar_javascript/demo/css/datePicker.css" />
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jscodes.com/codes/calendar_javascript/demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
  $(window).ready(function(){
  $('#date-pick').datePicker({clickInput:true});
  $('#date-picks').datePicker({clickInput:true});
});
</script>
<script type="text/javascript">
function suggestion()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
  	{// code for IE7+, Firefox, Chrome, Opera, Safari
  		xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange=function()
  	{
  		if (xmlhttp.readyState==4 && xmlhttp.status==200)
    	{
  	    	ele=document.getElementById('suggestion_result'); 
			ele.innerHTML = xmlhttp.responseText;
			if(document.getElementById('no_result') != null)
			{
				ele.style.display="none";
			}
			else
			{
  	    		ele.style.display="block";
			}
    	}
  	}
  	searchkey = document.getElementById('searchkey').value ;
  	if(searchkey == "")
  	{
  		document.getElementById('suggestion_result').style.display="none"; 
  	}
  	else
  	{
  		request = "suggestion?searchkey=" + searchkey ;
		xmlhttp.open("GET",request,true);
		xmlhttp.send();
  	}
}
function putValue(v)
{
	document.getElementById('searchkey').value=v;
	document.getElementById('suggestion_result').style.display="none";
}
</script>


<div id="container">
		<div class="search_sec">
<form method="post" name="simpleSearch" action="search">
			<div class="cont_srch_box">
				<div class="srch_pnl">
					<input onKeyUp="suggestion();" id="searchkey" name="searchkey" type="text" value="${searchkey}" class="text_box" placeholder="Search by destination, property ID, or keyword" />
					<input name="" class="go_btn" type="submit" value="Go" />
				</div>
			    <input type="hidden" name="p" value="1">
				<div id="suggestion_result" style="background: none repeat scroll 0 0 lightgray;
    											   border-bottom: 1px solid;
    											   border-left: 1px solid;
    											   border-right: 1px solid;
    											   margin-top: 39px;
    											   padding-left: 17px;
    										   	   position: absolute;
    											   text-align: left;
    											   vertical-align: top;
    											   width: 45%;
												   display: none;">
				</div>
	
				<div class="srch_frm">
					<ul>
						<li><b>Search by available dates</b><br />
							<input type="text" class="cal" name="it" id="date-pick" /> 
							<input type="text" class="cal" name="its" id="date-picks" />
						</li>
						<li><b>Bedrooms</b><br />
							<select name="bedrooms" class="drop_down">
								<option>any</option>
								<option value="Bedrooms:Studio">Studio</option>
									<option value="Bedrooms:1">1</option>
									<option value="Bedrooms:2">2</option>
									<option value="Bedrooms:3">3</option>
									<option value="Bedrooms:4">4</option>
									<option value="Bedrooms:5">5</option>
									<option value="Bedrooms:6">6+</option>
							</select>
						</li>
						<li><b>Sleeps</b><br />
							<select name="sleep" class="drop_down">
								<option>any</option>
								<option value="Sleeps:1">1+</option>
									<option value="Sleeps:2">2+</option>
									<option value="Sleeps:3">3+</option>
									<option value="Sleeps:4">4+</option>
									<option value="Sleeps:5">5+</option>
									<option value="Sleeps:6">6+</option>
									<option value="Sleeps:7">7+</option>
									<option value="Sleeps:8">8+</option>
									<option value="Sleeps:9">9+</option>
									<option value="Sleeps:10">10+</option>
									<option value="Sleeps:11">11+</option>
									<option value="Sleeps:12">12+</option>
									<option value="Sleeps:13">13 or more</option>
							</select></li>
					</ul>
				</div>
			</div>    
</form>
			<div class="map"><img id="mapImage" usemap="#map_home" src='<s:url value="/frontend/resources/images/map.jpg"/>' alt="" width="535px" /></div>
		</div>

		<map name="map_home" id="map_home">
	<area shape="poly" coords="143,222,122,191,116,195,105,189,103,133,73,119,49,127,54,145,37,143,50,162,33,167,35,182,42,191,49,198,5,210,60,206,78,190,100,189,132,223" href="#" title="AK" />
  <area shape="poly" coords="140,210" href="#" /><area shape="poly" coords="168,168,176,150,144,98,153,71,123,63,117,76,130,139,150,162,168,168" href="#" title="CA" />
<area shape="poly" coords="172,77,176,53,182,42,169,37,148,36,143,31,136,25,123,63,172,78" href="#" title="OR" />
<area shape="poly" coords="181,41,186,12,150,4,151,13,137,6,136,24,148,35,181,39" href="#" title="WA" />
<area shape="poly" coords="173,145,176,134,181,134,191,81,173,76,153,73,146,98,175,144" href="#" title="NV" />
<area shape="poly" coords="219,133,225,95,210,95,212,85,193,79,184,126,219,134" href="#" title="UT" />
<area shape="poly" coords="168,168" href="#" /><area shape="poly" coords="169,168,197,186,212,187,220,135,184,127,182,134,177,134,175,142,177,151,169,168" href="#" title="AZ" />
<area shape="poly" coords="211,85,216,58,204,59,198,47,194,44,197,38,192,28,190,22,192,14,187,12,181,38,172,75,210,84" href="#" title="ID" />
<area shape="poly" coords="217,56,262,62,266,24,207,17,192,13,191,21,196,37,195,45,204,59,217,56" href="search?searchkey=MT" title="MT"/>
<area shape="poly" coords="212,188,218,189,219,183,260,185,263,143,265,138,220,134,211,188" href="#" title="NM" />
<area shape="poly" coords="220,134,271,138,273,100,225,95,220,134" href="search?searchkey=CO" title="CO" />
<area shape="poly" coords="216,57,211,95,260,98,263,61,217,57" href="search?searchkey=WY" title="WY" />
<area shape="poly" coords="264,53,312,55,309,27,266,24,264,53" href="#" title="ND" />
<area shape="poly" coords="312,55,263,54,262,81,299,83,313,88,312,55" href="#" title="SD" />
<area shape="poly" coords="229,184,245,198,246,206,257,215,264,206,271,208,286,228,291,240,304,246,306,242,304,231,335,209,336,194,333,189,331,173,322,170,288,164,285,144,264,143,260,185,230,184" href="#" / title="TX">
<area shape="poly" coords="313,89,299,83,262,81,260,99,273,100,273,111,319,111" href="#" title="NE" />
<area shape="poly" coords="328,172,289,165,285,144,264,143,265,138,325,140,329,173" href="#" title="OK" />
<area shape="poly" coords="326,140,271,138,273,111,319,111,324,113,322,115,326,119,327,141" href="#" title="KS" />
<area shape="poly" coords="314,78,309,26,320,26,322,22,325,28,334,30,345,35,349,32,356,34,340,47,340,52,338,55,338,65,348,74,348,78,316,78" href="#" title="MN" />
<area shape="poly" coords="349,78,313,78,313,89,318,105,346,105,348,107,352,96,357,91,350,84,349,78" href="#" title="IA" />
<area shape="poly" coords="327,141,325,140,327,145,360,144,359,149,364,148,368,143,367,138,362,130,358,126,359,122,356,122,349,113,348,108,318,105,320,112" href="#"  title="MO" />
<area shape="poly" coords="332,179,329,172,326,144,343,145,359,144,360,148,363,149,361,156,354,167,354,175,353,177,334,179" href="#" title="AR" />
<area shape="poly" coords="335,209,336,193,333,188,332,179,338,179,354,177,356,182,355,186,351,192,351,196,366,195,369,202,371,206,369,209,374,211,374,214,367,210,365,214,356,214,351,209,337,210" href="#" / title="LA">
<area shape="poly" coords="352,86,348,78,349,74,338,66,338,55,341,46,349,45,354,51,367,52,372,59,370,66,374,61,372,78,373,86,353,86" href="#" title="WI" />
<area shape="poly" coords="366,137,358,126,359,122,354,122,349,111,348,105,352,96,357,91,352,86,374,86,377,118,377,122,374,131,373,137,366,136" href="#" title="IL" />
<area shape="poly" coords="376,92,403,90,409,80,406,68,403,66,398,75,397,69,402,64,400,57,391,52,384,57,380,77,384,84,377,92" href="#" title="MI" />
<area shape="poly" coords="374,128,385,128,398,117,394,90,375,92,378,121,374,128" href="#" title="IN" />
<area shape="poly" coords="368,143,367,136,374,137,375,128,385,128,399,118,399,116,414,120,418,128,411,138,369,144" href="#" title="KY" />
<area shape="poly" coords="361,157,368,144,411,138,422,136,405,154,362,156" href="#" title="TN" />
<area shape="poly" coords="413,120,398,116,395,91,403,90,408,89,410,91,423,84,425,97,425,105,418,110,413,120" href="#" title="OH" />
<area shape="poly" coords="423,84,426,104,461,99,467,93,463,89,465,83,458,78,424,84" href="#" title="PA" />
<area shape="poly" coords="424,83,458,78,465,83,471,85,472,80,472,74,471,65,467,54,466,46,456,49,447,58,450,63,445,68,431,71,434,76,425,83" href="#" title="NY" />
<area shape="poly" coords="487,59,480,41,484,17,495,17,499,31,503,34,507,35,495,44,486,59" href="#" title="ME" />
<area shape="poly" coords="418,128,414,121,425,104,433,103,435,109,445,103,446,107,438,117,433,118,432,125,421,130,416,132,417,128" href="#" title="WV" />
<area shape="poly" coords="384,200,383,193,403,192,406,194,427,193,430,191,433,191,444,210,450,223,451,238,449,242,444,242,436,231,426,220,427,210,415,200,406,205,399,199,385,200" href="#" title="FL" />
<area shape="poly" coords="370,202,378,202,375,186,376,156,362,156,354,166,353,177,356,181,351,192,351,195,365,195,370,202" href="#" title="MS" />
<area shape="poly" coords="422,136,412,138,417,131,432,125,433,118,439,117,447,108,445,105,453,108,452,113,459,115,465,127,421,136" href="#" title="VA" />
<area shape="poly" coords="405,155,415,142,420,142,423,136,465,128,472,136,472,140,465,147,457,150,455,153,456,156,450,156,444,152,434,151,430,149,406,155" href="#" title="NC" />
<area shape="poly" coords="385,200,380,198,378,202,375,188,376,155,395,155,401,176,404,180,405,193,384,193,384,200" href="#" title="AL" />
<area shape="poly" coords="405,193,405,187,404,180,401,176,395,155,405,155,412,154,436,177,434,191,404,193" href="#" title="GA" />
<area shape="poly" coords="437,178,412,154,430,149,443,152,453,156,447,161,436,177" href="#" title="SC" />
<area shape="poly" coords="116,265,124,260,116,251,113,246,105,243,97,241,95,238,84,233,75,235,84,238,98,244,110,248,113,258,116,265" href="#" title="HI" />
<area shape="poly" coords="190,309,199,303,192,296,183,290,175,287,167,283,156,279,148,281,165,285,171,288,180,292,187,297,187,304,190,309" href="#" title="HAWAII" />
<area shape="poly" coords="230,292,238,291,245,293,243,298,255,296,263,294,271,294,281,295,282,302,285,307,289,301,281,293,263,289,252,287,245,282,242,278,243,286,231,292" href="#"  title="CARIBBEAN"/>
<area shape="poly" coords="324,295,321,305,330,308,338,301,340,297,344,297,343,304,350,309,362,307,365,299,367,292,369,284,365,280,360,276,346,277,341,283,333,278,325,282,333,288,332,295,323,294" href="#" title="EUROPE" />
<area shape="rect" coords="494,103,530,126" href="#" title="VT" /><area shape="rect" coords="492,262,529,280" href="#" title="DC" /><area shape="rect" coords="494,241,530,261" href="#" title="MD" />
<area shape="rect" coords="494,222,530,240" href="#" title="DE" /><area shape="rect" coords="493,201,530,222" href="#" title="NJ" /><area shape="rect" coords="493,182,529,201" href="#" title="CT" /><area shape="rect" coords="493,163,529,181" href="#" title="RI" /><area shape="rect" coords="493,146,529,162" href="#" title="MA" /><area shape="rect" coords="493,126,530,145" href="#" title="NH" /><area shape="poly" coords="405,281" href="#" /><area shape="poly" coords="403,279,403,283,409,283,414,293,419,297,421,308,430,300,419,292,423,286,421,280,409,278,406,279" href="#" title="World" />
<area shape="poly" coords="434,289,433,296,438,297,440,304,445,300,445,295,443,290,436,287" href="#" title="World" />
<area shape="poly" coords="461,303,468,306,469,301,465,296,459,293,462,288,466,285,472,282,476,278,460,277,453,277,450,280,441,279,438,284,435,287,446,287,446,291,454,292,460,296,463,299,462,304" href="#" title="World" />
</map>
		<div class="slider"><img src='<s:url value="/frontend/resources/images/slider.jpg"/>' width="375px" alt="" /></div>
	</div>
